<template>
	<scroll-view scroll-y @scroll="scroll" scroll-with-animation class="h100" :scroll-top="scrollTop" v-bind="$attrs">
		<slot></slot>
		<up-back-top :scroll-top="oldScrollTop" z-index="100" @click="backTopFn" v-if="backTop" />
	</scroll-view>
</template>

<script setup>
	/***
	 * 参数属性
	 * @property {Boolean} backTop 是否显示返回顶部，默认为true
	 */
	const props = defineProps({
			backTop: {
				type: Boolean,
				default: false,
			}
		}),
		emits = defineEmits(['scrollTop', 'scroll']),
		scrollTop = ref(0),
		oldScrollTop = ref(0);

	function scroll(e) {
		oldScrollTop.value = e.detail.scrollTop;
		emits('scrollTop', e.detail.scrollTop);
		emits('scroll', e.detail);
	};

	function backTopFn() {
		scrollTop.value = oldScrollTop.value;
		nextTick(() => {
			scrollTop.value = 0
		});
	}
</script>